<template>
<div>
<svg>
 </svg>

</div>
 
</template>

<script>
import * as d3 from "d3";
 export default {
   data () {
     return {
         nodes : [//节点集
        {name:"陕西省",group:2.5},
        {name:"西安市",group:2},
        {name:"安康市",group:2},
        {name:"咸阳市",group:2},
        {name:"宝鸡市",group:2},
        {name:"铜川市",group:2},
        {name:"商洛市",group:2},
        {name:"汉中市",group:2},
        {name:"延安市",group:2},
        {name:"兴平市",group:2},
        {name:"碑林区",group:1.5},
        {name:"未央区",group:1.5},
        {name:"莲湖区",group:1.5},
        {name:"新城区",group:1.5},
        {name:"户县",group:1.5},
        {name:"祖庵镇",group:1},
        {name:"甘河镇",group:1},
        {name:"蒋村镇",group:1},
       ],
       edges : [//边集
        {source:0,target:1,value:2,relation:"直属"},  //value控制线的长短
        {source:0,target:2,value:2,relation:"直属"},
        {source:0,target:3,value:2,relation:"直属"},
        {source:0,target:4,value:2,relation:"直属"},
        {source:0,target:5,value:2,relation:"直属"},
        {source:0,target:6,value:2,relation:"直属"},
        {source:0,target:7,value:2,relation:"直属"},
        {source:0,target:8,value:2,relation:"直属"},
        {source:0,target:9,value:2,relation:"直属"},
        {source:1,target:10,value:1.5,relation:"县级"},
        {source:1,target:11,value:1.5,relation:"县级"},
        {source:1,target:12,value:1.5,relation:"县级"},
        {source:1,target:13,value:1.5,relation:"县级"},
        {source:1,target:14,value:1.5,relation:"县级"},
        {source:14,target:15,value:1,relation:"区级"},
        {source:14,target:16,value:1,relation:"区级"},
        {source:14,target:17,value:1,relation:"区级"},
    ],
     }
   },
  methods:{
       drawing(){
       var _this = this;
       var width = 1440;
       var height = 1000;
       var nodes = _this.nodes;
       var mapGroup = [1,1.5,2,2.5]
       for (var index = 0; index < 1000; index++) {
           let random= Math.floor(Math.random()*4+0); 
           console.log(random)
           const pop = {
                name:`模拟节点${index}`,group:mapGroup[random]
           }
           nodes.push(pop)
           
       }
       var edges = _this.edges;
       var svg = d3.select("svg")
        .attr("width",width)
        .attr("height",height);
        var marge = {top:10,bottom:10,left:10,right:10}
        var g = svg.append("g").attr("transform","translate("+marge.top+","+marge.left+")");
           //设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
        var colorScale = d3.scaleOrdinal()
        .domain(d3.range(nodes.length))
        .range(d3.schemeCategory10);
        var forceSimulation = d3.forceSimulation()
        .force("link",d3.forceLink())
        .force("charge",d3.forceManyBody())
        .force("center",d3.forceCenter());
        //生成节点数据
        forceSimulation.nodes(nodes)
        .on("tick",ticked);//这个函数很重要，后面给出具体实现和说明
        //生成边数据
        forceSimulation.force("link")
        .links(edges)
        .distance(function(d){//每一边的长度
            return d.value*100;
        })
        //设置图形的中心位置
        forceSimulation.force("center").x(width/2).y(height/2);
     
        //绘制边
        var links = g.append("g")
        .selectAll("line")
        .data(edges)
        .enter()
        .append("line")
        .attr("stroke",function(d,i){
            return colorScale(d.value);   //边的颜色
            //return "#ccc";
        })
        .attr("stroke-width",1);
        //边上文字
        var linksText = g.append("g")
            .selectAll("text")
            .data(edges)
            .enter()
            .append("text")
            .style("text-anchor", "middle")//字体居中显示
            .style('fill', '#ccc')//字体颜色
            .attr("font-size", 10)//字体大小
            .attr('dy', '.35em')//字体垂直居中显示
            .text(function(d){
                return d.relation
            })
    //建立用来放在每个节点和对应文字的分组<g>
    var gs = g.selectAll(".circleText")
        .data(nodes)
        .enter()
        .append("g")
        .attr("transform",function(d,i){
            var cirX = d.x;
            var cirY = d.y;
            return "translate("+cirX+","+cirY+")";
        })
        .on("click",function(d){
            _this.$alert(d.name);
        })
        .call(d3.drag()
            .on("start",started)
            .on("drag",dragged)
            .on("end",ended)
        );
        
 
    //绘制节点
    gs.append("circle")
       // .attr("r",20)
        .attr("r",function (d,i) {    //圆圈半径
            return d.group*10;
        })
        .attr("fill",function(d,i){
            //return colorScale(i);
            return colorScale(d.group);
        })
    //文字
    gs.append("text")
        .attr("x",-25)
        .attr("y",-5)
        .attr("dy",10)
        .text(function(d){
            return d.name;
        })
    function ticked(){
        links.attr("x1",function(d){return d.source.x;})
            .attr("y1",function(d){return d.source.y;})
            .attr("x2",function(d){return d.target.x;})
            .attr("y2",function(d){return d.target.y;});
 
        linksText.attr("x",function(d){
                return (d.source.x+d.target.x)/2;
            }).attr("y",function(d){
                return (d.source.y+d.target.y)/2;
            });
 
        gs.attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }
    //drag
    function started(d){
        if(!d3.event.active){
            forceSimulation.alphaTarget(0.8).restart();//设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0，1]
        }
        d.fx = d.x;
        d.fy = d.y;
    }
    function dragged(d){
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }
    function ended(d){
        if(!d3.event.active){
            forceSimulation.alphaTarget(0);
        }
        d.fx = null;
        d.fy = null;
    }
   },
  },
   mounted () {
       this.drawing();
   },
   computed: {

   },
   components: {

   }
 }
</script>

<style lang='less' scoped >

 
</style>
